$(function(){
     // 1.1 获取裁剪区域的 DOM 元素
  var $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)




  //当点击上传按钮的时候，用js来模拟点击input:file文件框
  $('#btn').click(function(){
    $('#file').click();
  })


  $('#file').on('change',function(){
    // console.log(this.files)
    if(this.files.length <= 0)return layer.msg('请选择文件');
    // 读取到文件内容路径然后替换一下原始图片
    // URL是h5内置对象，URL.createObjectURL 
    // 文件上传之后是上传内存当中
    // URL.createObjectURL可以获取到内存中这个图片的路径 tmp temp 临时文件
    var newImgURL = URL.createObjectURL(this.files[0]);
    // 把获取到的最新的图片路径替换原始图片
    $image
    .cropper('destroy')      // 销毁旧的裁剪区域
    .attr('src', newImgURL)  // 重新设置图片路径
    .cropper(options)        // 重新初始化裁剪区域
  })

  //给确定按钮添加点击事件
  $('#btnUpload').on('click',function(){
    // base64其实就是二进制图片内容
    var dataURL = $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
    $.ajax({
      method:'post',
      url:'/my/update/avatar',
      data:{
        avatar:dataURL
      },
      success:function(res){
        console.log(res);
        if(res.status != 0)return layer.msg('更换头像失败');
        window.parent.getUserInfo();
      }
    })
  })
})